<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      const g = svg.append('g');


      const x = d3.scaleLinear()
        .domain([0,15])
        .range([100,700])  

      const xAxis = d3.axisBottom(x)

      g.append('g').attr('transform','translate(0,500)')
        .call(xAxis)


      // const brush = d3.brush()
      //   .extent([ [100,-400] , [700,0] ])
      //   .on('start',(e,d)=>{
      //     console.log('start',d,e);
      //   })
      //   .on('brush',(e,d)=>{
      //     //console.log('brush',d,e);
      //   })
      //   .on('end',(e,d)=>{
      //     console.log('end',d,e);
      //   })

      // g.call(brush);  
      // g.call(brush.move,[ [100,-100],[200,0] ])

      //绘制一堆点
      const data = Array.from({length:300},d3.randomUniform(0,15))
      g.selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx',d=>x(d))
        .attr('cy',d3.randomUniform(400,480))
        .attr('r',4)
        .attr('fill','none')
        .attr('stroke','#ccc')


      //刷子处理
      const brush = d3.brushX()
        .extent([ [100,380],[700,500]])
        .on('brush',burshBox)
        .on('end',burshBox)

      g.call(brush);  


      function burshBox(e,d){
        if(e.selection == null){
          //没有刷子区域，所有的圆都需要恢复原来的颜色
          g.selectAll('circle').attr('stroke','#ccc')
        }else{
           const [l , r] = e.selection ;
           g.selectAll('circle')
            .attr('stroke',d=>d >= x.invert(l) && d <= x.invert(r) ? '#f00' : '#ccc')
        }
      }
    </script>
  </body>
</html>
